<template>
  <div>
    <el-carousel indicator-position="outside" height="50vh">
      <el-carousel-item v-for="item in homeNoticeList" :key="item.id" >
        <router-link :to="`/noticeinfo/0/${item.no}`">
          <div class="pic_item">
            <el-image class="cover" style="width:100%" :src="item.cover" fit="cover"></el-image>
            <div class="titlebox">
              <span>{{item.title | showTitle}}</span>
            </div>
          </div>
        </router-link>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import {getNoticeListApi} from "@/api/notice"
import 'element-ui/lib/theme-chalk/display.css';
  export default {
    data(){
      return{
        homeNoticeList:[],
        searchCondition :{
          uid:'',
          nid:'',
          username:'',
          title:'',
          type:'',
          status:1,
          orderField:0,
          startTime:'',
          endTime:'',
          page: 1,
          pageSize: 5,
        },
      }
    },
    created(){
      this.getHomeNotice();
    },
    methods:{
      async getHomeNotice(){
        let res = await getNoticeListApi(this.searchCondition);
        if(res&&res.code==200){
          this.homeNoticeList = res.data.list;
        }
      },
    },
    filters:{
      showTitle(val){
        if(val.length>25){
          return val.substring(0,25)+"...";
        }
        return val;
      }
    }
  }
</script>

<style lang="scss" scoped>
.el-carousel__item .titlebox{
  color: #fff;
  line-height: 40px;
  font-size: 0.8rem;
  opacity: 0.75;
  margin: 0;
  padding: 0 20px;
  width: 100%;
  height: 40px;
  background-color: rgba(39, 22, 22, 0.74);
  position: absolute;
  left: 0;
  bottom: 0;
}

.cover {
  position: relative;
}

.pic_item {
  position: relative;
  height: 100%;
}

.pic_item:hover{
  cursor: pointer;
}
</style>
